<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" id="favicon" href="https://vd006-universe-portal-wap.shubonylon.com/favicon.ico?v=3">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
		<meta name="version" sha="539633bc" b_ts="1708503252" tag="release-4.18.1" content="v4.18.1-a" ts="">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="theme-color" content="#FFFFFF">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>ROBIN HOOD CUP</title>
		<link rel="stylesheet" href="css/main.f4262188.css">
		<link rel="stylesheet" type="text/css" href="css/80208.edd6eb4a.chunk.css">
		<link rel="stylesheet" type="text/css" href="css/43178.b07e442c.chunk.css">
		<link rel="stylesheet" type="text/css" href="css/14172.747a5685.chunk.css">
		<link rel="stylesheet" type="text/css" href="css/app.4124dd2.css" />
		<style>
			body {
			    background-color: #fff;
			}
			.container {
				max-width: 100vw;
				padding: 20px;
				background-color: #fff;
				border-radius: 8px;
			}

			label {
				display: block;
				margin-bottom: 5px;
				font-weight: bold;
			}

			input[type="text"],
			input[type="tel"],
			input[type="email"],
			select {
				width: 100%;
				padding: 10px;
				margin-bottom: 10px;
				border: 1px solid #ccc;
				border-radius: 5px;
				box-sizing: border-box;
			}

			input[type="submit"] {
				width: 100%;
				padding: 10px;
				background-color: #0c186c;
				color: #fff;
				border: none;
				border-radius: 5px;
				cursor: pointer;
				margin-top: 50px;
			}

			input[type="submit"]:hover {
				background-color: #080a6c;
			}
		</style>
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/request.js"></script>
		<script type="text/javascript" src="js/fingerprint2.min.js"></script>

	</head>
	<body class="mobile light" style="overflow: auto;">
		<div class="Layout_main__F3C6D" id="app">
			<div class="MobileMenu_wrapper__t9WOf"
				style="transform: translateY(0px); transition: all 0.3s ease 0s;">
				<div class="MobileMenu_inner__u+u2d">
					<div class="MobileMenu_radiusBox__9+2HT">
						<div class="LoginHeader_topSection__1XOO+">
							<img src="img/logo.png" alt="logo"
									style="width: 100%;">
						</div>
					</div>
				</div>
			</div>
			<section class="Layout_container__WVln4">
				<div class="Layout_content__JVGjp container">
					<form @submit.prevent="submitForm">
						<label for="name">Name:</label>
						<input type="text" v-model="formData.name" required>
					
						<label for="phone">Phone Number:</label>
						<input type="tel" v-model="formData.phone" pattern="^1[0-9]{10}$" required>
					
						<label for="email">Email:</label>
						<input type="email" v-model="formData.email" required>
					
						<label for="type">Type:</label>
						<select v-model="formData.type" required>
							<option value="">Select type</option>
							<option value="1">UNNC Student</option>
							<option value="2">UNNC Staff</option>
							<option value="3">DKU Student</option>
							<option value="4">DKU Staff</option>
							<option value="5">NYUSH Student</option>
							<option value="6">NYUSH Staff</option>
							<option value="7">ZWU Student</option>
							<option value="8">ZWU Staff</option>
							<option value="7">ZAFU Student</option>
							<option value="8">ZAFU Staff</option>
							<option value="9">Alumni</option>
							<option value="11">Visitor</option>
						</select>
						<block v-if="formData.type === '1' || formData.type === '3' 
							|| formData.type === '5' || formData.type === '7'">
							<label for="yearOfStudy">Year of Study:</label>
							<select v-model="formData.yearOfStudy" required>
								<option value="">Select year of study</option>
								<option value="1">Year 1</option>
								<option value="2">Year 2</option>
								<option value="3">Year 3</option>
								<option value="4">Year 4</option>
								<option value="5">Master</option>
								<option value="5">PHD</option>
							</select>
						</block>
					
						<input type="submit" value="Submit">
					</form>
				</div>
			</section>
		</div>
	</body>
	<script>
		const App = {
			data() {
				return {
					formData: {
						fingerprint: '',
						name: '',
						phone: '',
						email: '',
						type: '',
						yearOfStudy: ''
					}
				}
			},
			created(opts){
				this.getFingerprint()
			},
			methods: {
				submitForm: function() {
					post('sys/gymSportsInvitation/app/saveVisitor', this.formData).then(response => {
						alert("Submission successful!");
						window.location.href = 'index.html'
					}).catch(err => {
						console.log(err);
					});
				},
				getFingerprint() {
					const urlParams = new URLSearchParams(window.location.search);
					const parameterValue = urlParams.get('code');
					if (parameterValue) {
						this.formData.fingerprint = parameterValue;
					}
				}
			}
		};
		Vue.createApp(App).mount('#app');
	</script>
</html>